<%--
  Created by IntelliJ IDEA.
  User: august_Ld
  Date: 2022/5/17
  Time: 13:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>
<head>
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<%--    <!-- Bootstrap 的 CSS 文件 -->--%>
<%--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"--%>
<%--          rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">--%>


</head>
<body>

<div class="container">
    <h1 style="text-align: center;height: 300px;line-height: 300px">用户列表</h1>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <table class="table table-hover">
                <thead>
                <tr>
                    <td>id</td>
                    <td>用户名</td>
                    <td>头像</td>
                    <td>部门</td>
                    <td>操作</td>
                </tr>
                </thead>

                <tbody id="data">


                </tbody>


            </table>

            <nav aria-label="Page navigation example">
                <ul class="pagination" id="pagination">
                    <li class="page-item"><button class="page-link">1</button> </li>
                    <li class="page-item"><button class="page-link">2</button> </li>
                </ul>
            </nav>



        </div>
        <div class="col-md-2"></div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script>
    $(function (){
        initTable("user2")
    })

    function initTable(url){
        //ajax的顺序特重要

        $.post(url,function (data){
            initPagination(data)
            let da = JSON.parse(data);
            let users = da.data

            let html = "";
            // debugger
            for(let user of users){
                html += "<tr><td>"+ user.id+"</td>"+
                    "<td>"+ user.name +"</td>"+
                    "<td><img width='40px' src='"+ user.profile+"'></td>"+
                    "<td>"+ user.dept.name+"</td>"+
                    "<td><button type='button' class='delete btn btn-danger' data-id='"+user.id +"'>删除</button>"+
                    "<a type='button' href='user/update?id="+ user.id +"' class='update btn btn-primary'>修改</a></td></tr>"
            }
            $("#data").empty().html(html)
        })



    }

    function initPagination(data){
        let d = JSON.parse(data)

        let total = d.total
        let currentPage = d.currentPage
        let pageSize = d.pageSize
        let totalPage = Math.ceil(total/pageSize)

        let html = "";
        for(let i = 0; i< 5; i++)
        {
            if(currentPage -2 + i > 0 && currentPage -2 + i <= totalPage){
                console.log(currentPage -2 + i)
                html =+ "<li class= \"page-item\"><button class= \"page-link\">"+
                    (currentPage -2 + i)
                    + "</button></li>"
            }
        }

        $("#pagination").html(html);


        //特别重要，在dom生成之前不能添加对象
        $(".page-link").click(function (){
            let currentPage = $(this).html();
            initTable("user2?currentPage=" + currentPage)
        })
    }




</script>
</body>


</html>
